<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>用户注册</title>
	<!-- Bootstrap -->
	<link rel="stylesheet" href="${pageContext.request.contextPath }/bootstrap/css/bootstrap.min.css"  >
	<link rel="stylesheet" href="${pageContext.request.contextPath }/css/zhuce.css" />
	<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
	  <script src="${pageContext.request.contextPath}/js/jquery-3.6.0.min.js"></script>
	<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
	<script src="${pageContext.request.contextPath }/bootstrap/js/bootstrap.min.js" ></script>
  	<script type="text/javascript">
		var checkname = null;
		function verUserName() {
			let username = $("#username").val();
			let prompt_name = $("#prompt_name");
			var reg = /^[a-zA-Z0-9\u4e00-\u9fa5_-]{2,15}$/;
			if(reg.test(username)){
				$.ajax({
					type:'post',
					url:'${pageContext.request.contextPath}/userController/exist',
					contentType:'application/json;charset=UTF-8',
					async: true,
					data: JSON.stringify({"username": username}),
					success:function(data){
						if(data.code === 500){
							prompt_name.html("<p style='color: green;'>&nbsp;&nbsp;用户名可用</p>")
							checkname = true;
						}
						else{
							prompt_name.html("<p style='color: red;'>&nbsp;&nbsp;用户名已存在，请换一个名字</p>")
							checkname = false;
						}
					}
				});
			}else {
				prompt_name.html("<p style='color: red;'>&nbsp;&nbsp;用户名格式错误</p>")
				checkname = false;
			}

		}

  	    //密码校验
  	    function verpassword() {

  	    	var pwd = $("#pwd").val();
  	    	var prompt_psw = $("#prompt_psw");
  	    	var reg = /^(?=.*[a-zA-Z])(?=.*[0-9])(?=.*[._~!@#$^&*])[A-Za-z0-9._~!@#$^&*]{6,32}$/;
  	    	　if(reg.test(pwd)){
  	    		prompt_psw.html("<p style='color: #00FA9A;'>&nbsp;&nbsp;密码可用</p>")
  	    	　　}else{
  	    		　prompt_psw.html("<p style='color: red;'>&nbsp;&nbsp;密码格式错误</p>")
  	    	　 }	
		}
  		//密码是否一致
  		var checkPassword = null;
  	    function ver_password() {
  	    	var pwd = $("#pwd").val();
  	    	var pwd_1 = $("#pwd_1").val();
  	    	var prompt_psw1 = $("#prompt_psw1");
  	    	　if(pwd == pwd_1){
  	    		prompt_psw1.html("<p style='color: #00FA9A;'>&nbsp;&nbsp;密码一致</p>")
  	    		checkPassword = true;
  	    	　　}else{
  	    		　prompt_psw1.html("<p style='color: red;'>&nbsp;&nbsp;密码不一致</p>")
  	    		checkPassword = false;
  	    	　 }	
		}
  	  //邮箱校验
  	  	var checkEmail = null;
  	  	function verEmail() {
  	  	var email = $("#email").val();
  	    var prompt_email = $("#prompt_email");
  		var reg =  /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((\.[a-zA-Z0-9_-]{2,3}){1,2})$/;
	 	  	if(reg.test(email)){
	 	  		prompt_email.html("<p style='color: #00FA9A;'>&nbsp;&nbsp;邮箱格式正确</p>")
	 	  		checkEmail = true;
		   	　　}else{
		   		prompt_email.html("<p style='color: red;'>&nbsp;&nbsp;请输入正确的邮箱</p>")
		   		checkEmail = false;
		   	　　}	
		 	}

  	    function regist() {
			let username = $("#username").val();
			let password = $("#pwd").val();
			let email = $("#email").val();
			if(checkname & checkPassword & checkEmail){
				$.ajax({
					type:'post',
					url:'${pageContext.request.contextPath}/userController/regist',
					contentType:'application/json;charset=UTF-8',
					async: true,
					data: JSON.stringify({"username": username,"password":password,"email":email}),
					success:function(data){
						if(data.code === 500){
							alert("注册失败")
						} else{
							alert("注册成功,点击跳转登录页面")
							window.location.href ="${pageContext.request.contextPath}/userController/showLogin";
						}
					}
				});
			}else{
				alert("请输入正确格式")
			}
		}
  	</script>
  </head>
  <body>
		  <!-- 注册div -->
		  <div class="row">
			  <form class="form-inline" action="" method="post">
					<table cellpadding="30" cellspacing="0" align="center" class="tab" >
						<tr>
							<td>
								<label>用户名：</label>
							</td>
							<td>
								<input type="text" id="username" name="username" onblur="verUserName()">
							</td>
							<td id="prompt_">
								<p id="prompt_name">&nbsp;&nbsp;请输入你想注册的用户名，格式为2-15个字符，可以为中文，字母和下划线</p>
							</td>
						</tr>
						<tr>
							<td >
								<label for="pwd">设置密码：</label>
							</td>
							<td>
								<input type="password" id="pwd" name="password" onblur="verpassword()">
							</td>
							<td>
								<p id="prompt_psw">&nbsp;&nbsp;填写登录密码，6-32个字符，必须有字母数字和特殊符号</p>
							</td>
						</tr>
						<tr>
							<td >
								<label for="pwd">确认密码：</label>
							</td>
							<td>
								<input type="password" name="_password" id="pwd_1" onblur="ver_password()">
							</td>
							<td>
								<p id="prompt_psw1">&nbsp;&nbsp;确认您的登录密码</p>
							</td>
						</tr>
						<tr>
							<td>
								<label for="email">邮箱：</label>
							</td>
							<td>
								<input type="email" id="email" name="email" onblur="verEmail()">
							</td>
							<td>
								<p id="prompt_email">&nbsp;&nbsp;输入您的邮箱</p>
							</td>
						</tr>
					</table>
				  <input type="button" class="submit" value="提交" onclick="regist()">
			  </form>
		  </div>
  </body>
</html>